---
order: 0
title: Text selection adapter
description: Listen and respond to the dragging of text selections in a document
---

import SectionMessage from '@atlaskit/section-message';

The text selection adapter allows you to listen and respond to text selections being dragged around
in a `window`. Text selection is seperate from the
[element adapter](/components/pragmatic-drag-and-drop/core-package/adapters/element) as text
selections are not based on elements, but rather, whatever text the user has wanted to select.

The text selection adapter consists of the following pieces:

- `dropTargetForTextSelection`: marking an element as a valid
  [drop target](/components/pragmatic-drag-and-drop/core-package/drop-targets) for text selection
  drag operations
- `monitorForTextSelection`: create a
  [monitor](/components/pragmatic-drag-and-drop/core-package/monitors) to listen to text selection
  drag operations anywhere
- `type`s: all types for this adapter

<SectionMessage>

It is likely that some
[top level utilities](/components/pragmatic-drag-and-drop/core-package/utilities) will be helpful
for your experience as well

</SectionMessage>

## Drop targets for text selection

A [drop target](/components/pragmatic-drag-and-drop/core-package/drop-targets) for text selection
drag operations.

The default `dropEffect` for this type of drop target is `"copy"` as generally you will be copying
dragged text. However, if that is not the case for your drop target, then please update it's drop
effect through `getDropEffect()`.

```ts
import { dropTargetForTextSelection } from '@atlaskit/pragmatic-drag-and-drop/text-selection/adapter';

const cleanup = dropTargetForTextSelection({
  element: myElement,
  onDragStart: () => console.log('text started dragging in me');
});
```

## Monitors for text selection

A [monitor](/components/pragmatic-drag-and-drop/core-package/monitors) for text selection drag
operations.

```ts
import { monitorForTextSelection } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

const cleanup = monitorForTextSelection({
  onDragStart: () => console.log('Dragging an element');
});
```

## Types

Generally you won't need to explicitly use our provided types, but we expose a number of TypeScript
types if you would like to use them.

All [events](/components/pragmatic-drag-and-drop/core-package/events) on drop targets and monitors
are given the following base payload:

```ts
type TextSelectionEventBasePayload = {
	location: DragLocationHistory;
	source: TextSelectionDragPayload;
};

type TextSelectionDragPayload = {
	/**
	 * The `Text` node that is the user started the drag from.
	 * Note: the `Text` node does not include all text being dragged.
	 * Use the `plain` or `html` properties to get the full selection
	 */
	target: Text;
	/** The plain text of the selection */
	plain: string;
	/** the HTML of the selection */
	HTML: string;
};
```

For all the arguments for all events, you can use our event map type:

```ts
type TextSelectionEventPayloadMap = {
	onDragStart: TextSelectionEventBasePayload;
	// .. the rest of the events
};
```

Drop targets are given a little bit more information in each event:

```ts
type TextSelectionDropTargetEventBasePayload = TextSelectionEventBasePayload & {
	/**
	 * A convenance pointer to this drop targets values
	 */
	self: DropTargetRecord;
};
```

For all arguments for all events on drop targets, you can use our event map type:

```ts
type TextSelectionDropTargetEventPayloadMap = {
	onDragStart: TextSelectionDropTargetEventBasePayload;
	// .. the rest of the events
};
```

Drop target feedback functions (`canDrop`, `getData`, `getDropEffect`, `getIsSticky`) are given the
following:

```ts
type TextSelectionDropTargetGetFeedbackArgs = {
	/**
	 * The users _current_ input
	 */
	input: Input;
	/**
	 * The data associated with the entity being dragged
	 */
	source: TextSelectionDragPayload;
	/**
	 * This drop target's element
	 */
	element: Element;
};
```

The monitor feedback function (`canMonitor`), is given the following:

```ts
type TextSelectionMonitorGetFeedbackArgs = {
	/**
	 * The users `initial` drag location
	 */
	initial: DragLocation;
	/**
	 * The data associated with the entity being dragged
	 */
	source: TextSelectionDragPayload;
};
```

You can get these type from the text selection adapter import:

```ts
import type {
  // Payload for the text selection being dragged
  TextSelectionDragPayload
  // Base events
  TextSelectionEventBasePayload
  TextSelectionEventPayloadMap,
  // Drop target events
  TextSelectionDropTargetEventBasePayload,
  TextSelectionDropTargetEventPayloadMap,
  // Feedback types
  TextSelectionDropTargetGetFeedbackArgs,
  TextSelectionMonitorGetFeedbackArgs,
} from '@atlaskit/pragmatic-drag-and-drop/text-selection/adapter';
```

There are also some types (eg `DropTargetLocation`) that can be used for all adapters which can be
found on our [top level utilities page](/components/pragmatic-drag-and-drop/core-package/utilities)
